<template>
  <div class="more-footer">
    <ul>
      <li>
        <ul class="container">
          <li>
            <a href="javascript:;"
              ><img
                src="../../../assets/images/main/hd/more-footer/first-box/1.png"
                alt=""
            />
            <p>保障服务</p>
            </a>
          </li>
          <li>
            <a href="javascript:;"
              ><img
                src="../../../assets/images/main/hd/more-footer/first-box/2.png"
                alt=""
            />
            <p>企业团购</p></a>
          </li>
          <li>
            <a href="javascript:;"
              ><img
                src="../../../assets/images/main/hd/more-footer/first-box/3.png"
                alt=""
            />
            <p>F码通道</p>
            </a>
          </li>
          <li>
            <a href="javascript:;"
              ><img
                src="../../../assets/images/main/hd/more-footer/first-box/4.png"
                alt=""
            />
              <p>小鑫粉卡</p>
            </a>
          </li>
          <li>
            <a href="javascript:;"
              ><img
                src="../../../assets/images/main/hd/more-footer/first-box/5.png"
                alt=""
            />
            <p>以旧换新</p>
            </a>
          </li>
          <li>
            <a href="javascript:;"
              ><img
                src="../../../assets/images/main/hd/more-footer/first-box/6.png"
                alt=""
            />
            <p>话费充值</p>
            </a>
          </li>
        </ul>
      </li>
      <li v-for="(item, index) in imgList" :key="index">
        <a href="javascript:;"><img :src="item" alt="" /></a>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "MoreFooter",
  setup() {
    const imgList = reactive([
      require("../../../assets/images/main/hd/more-footer/one.jpg"),
      require("../../../assets/images/main/hd/more-footer/two.jpg"),
      require("../../../assets/images/main/hd/more-footer/three.jpg"),
    ]);

    return {
      imgList,
    };
  },
};
</script>

<style lang="less" scoped>
.more-footer {
  margin-top: 12px;
  width: 100%;
  float: left;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      width: 316px;
      height: 170px;
      &:first-child {
        width: 234px;
        background-color: #5f5750;
        .container {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-content: space-around;
          height: 170px;
          li {
            position: relative;
            width: 72px;
            height: 82px;
            border-top: 1px solid rgba(255, 255, 255, .1);
            &::before {
              content: "";
              position: absolute;
              top: 5px;
              left: -2px;
              width: 1px;
              height: 70px;
              background-color: rgba(255, 255, 255, .1);
            }
            a {
              margin-top: 20px;
              display: block;
              font-size: 12px;
              color: rgba(255, 255, 255, .5);
              text-align: center;
              &:hover {
                color: #fff;
                img {
                  opacity: 1;
                }
              }
              img {
                width: 24px;
                height: 24px;
                opacity: .5;
              }
            }
          }
        }
      }
      a {
        display: block;
        img {
          width: 316px;
          height: 170px;
        }
      }
    }
  }
}
</style>